import React, {useEffect, useState} from "react";
import {View, Text, StyleSheet, KeyboardAvoidingView, Platform, Image, ScrollView, TextInput, TouchableOpacity, ActivityIndicator} from "react-native";
import {COLORS, emits, icons, images, SIZES} from "../constants";
import {ptd} from "../utils/styleUtil";
import LinearGradient from "react-native-linear-gradient";
import Toast from "react-native-root-toast";
// @ts-ignore
import RCTNativeAppEventEmitter from "react-native/Libraries/EventEmitter/RCTNativeAppEventEmitter";
import {useBinaryAction} from "../core-native";
import {LoginActions} from "../modules/LoginModule";
import {useSelector} from "react-redux";
import {RootState} from "../types";
import {LOADING_LOGIN} from "../constants/loadingKey";

const LoginPage = ({navigation}: any) => {
    const [username, setUsername] = useState("");
    const [password, setPassword] = useState("");
    const loginAction = useBinaryAction(LoginActions.loginRequest);
    const loadingLogin = !!useSelector((state: RootState) => state.loading[LOADING_LOGIN]);

    useEffect(() => {
        const loginSuccessListener = RCTNativeAppEventEmitter.addListener(emits.EMIT_LOGIN_SUCCESS, () => {
            Toast.show("Login Success", {
                duration: 500,
                position: SIZES.height - 200,
                onHidden: () => {
                    navigation.replace("Tab");
                },
            });
        });
        return () => {
            loginSuccessListener.remove();
        };
    });

    const handleLogin = () => {
        let errMsg = "";
        if (!username) {
            errMsg = "username";
        } else if (!password) {
            errMsg = "password";
        }
        if (errMsg) {
            return Toast.show("Please input " + errMsg, {
                duration: 1000,
                position: SIZES.height - 200,
            });
        }
        loginAction(username, password);
    };

    return (
        <KeyboardAvoidingView style={styles.container} behavior={Platform.OS === "ios" ? "padding" : "height"}>
            <Image source={images.loginTopBg} style={styles.topBg} />
            <View style={styles.headerTxtWra}>
                <Text style={styles.headerTxt}>Examination</Text>
            </View>
            <View style={styles.loginWra}>
                <ScrollView bounces={false}>
                    <View style={styles.iptWra}>
                        <Image source={icons.user} style={styles.iptIcon} />
                        <TextInput placeholder="Plase input username(任意输入)" style={styles.ipt} autoCapitalize="none" onChangeText={txt => setUsername(txt)} />
                    </View>
                    <View style={styles.iptWra}>
                        <Image source={icons.pwd} style={styles.iptIcon} />
                        <TextInput placeholder="Plase input password(任意输入)" secureTextEntry style={styles.ipt} onChangeText={txt => setPassword(txt)} />
                    </View>
                    <TouchableOpacity onPress={handleLogin} disabled={loadingLogin}>
                        <LinearGradient start={{x: 0, y: 0}} end={{x: 1, y: 0}} colors={loadingLogin ? ["#4777DBaa", "#414DBEaa"] : ["#4777DB", "#414DBE"]} style={styles.loginBtn}>
                            {loadingLogin && <ActivityIndicator style={{marginRight: 5}} color="#fff" />}
                            <Text style={styles.loginTxt}>Login</Text>
                        </LinearGradient>
                    </TouchableOpacity>
                    <View style={styles.otherLoginWra}>
                        <View style={styles.otherLoginLine} />
                        <Text style={styles.otherLoginTxt}>Or Other Login</Text>
                        <View style={styles.otherLoginLine} />
                    </View>
                    <View style={styles.socialWra}>
                        <TouchableOpacity>
                            <Image source={icons.socialWechat} style={styles.socialIcon} />
                        </TouchableOpacity>
                        <TouchableOpacity>
                            <Image source={icons.socialTwitter} style={styles.socialIcon} />
                        </TouchableOpacity>
                        <TouchableOpacity>
                            <Image source={icons.socialYoutube} style={styles.socialIcon} />
                        </TouchableOpacity>
                    </View>
                </ScrollView>
            </View>
        </KeyboardAvoidingView>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    topBg: {height: ptd(320), width: "100%"},
    headerTxtWra: {
        position: "absolute",
        left: 0,
        right: 0,
        top: 100,
        alignItems: "center",
    },
    headerTxt: {
        fontSize: ptd(45),
        color: "#fff",
    },
    loginWra: {
        position: "absolute",
        left: SIZES.SPACE_L,
        right: SIZES.SPACE_L,
        top: 200,
        bottom: 60,
        backgroundColor: "#fff",
        borderRadius: ptd(10),
        paddingHorizontal: SIZES.SPACE_M,
        paddingBottom: SIZES.SPACE_S,
        paddingTop: 40,
    },
    iptWra: {
        backgroundColor: "#F7F7F7",
        marginBottom: ptd(25),
        paddingHorizontal: 20,
        paddingVertical: 15,
        borderRadius: ptd(5),
        flexDirection: "row",
        alignItems: "center",
    },
    iptIcon: {
        width: 28,
        height: 28,
        marginRight: 20,
    },
    ipt: {
        flex: 1,
        padding: 0,
    },
    loginBtn: {
        height: 50,
        borderRadius: ptd(30),
        alignItems: "center",
        justifyContent: "center",
        flexDirection: "row",
    },
    loginTxt: {
        color: "#fff",
        fontSize: ptd(18),
    },
    otherLoginWra: {
        flexDirection: "row",
        alignItems: "center",
        marginVertical: 30,
    },
    otherLoginLine: {
        height: 1,
        flex: 1,
        backgroundColor: COLORS.lightGray2,
    },
    otherLoginTxt: {
        marginHorizontal: SIZES.SPACE_S,
        fontSize: ptd(13),
        color: COLORS.lightGray,
    },
    socialWra: {
        flexDirection: "row",
        alignItems: "center",
        justifyContent: "space-between",
        paddingHorizontal: SIZES.SPACE_S,
    },
    socialIcon: {
        width: 55,
        height: 55,
    },
});

export default LoginPage;
